<template>
    <div>
    <h1>水果列表</h1>
    <ul>
    <li v-for="fruit in fruits" :key="fruit.id">
    <strong>水果编号:</strong> {{ fruit.id }} ---
    <strong>水果名称:</strong> {{ fruit.name }} ---
    <strong>详细信息:</strong> {{ fruit.details }}
    </li>
    </ul>
    </div>
    </template>
    
    <script>
    export default {
    data() {
    return {
    fruits: [
    { id: 1, name: '苹果', details: '苹果汁水丰富，可以生津止渴。' },
    { id: 2, name: '柠檬', details: '柠檬具有生津止渴、化痰止咳的功效。' }
    ]
    };
    }
    };
    </script>
    
    <style scoped></style>